<template>
	<view>
		<wareHouse :loading="loading">
			<view class="conTitle">
				第一环节：量表测试
			</view>
			<view class="contentCn">

				<view class="conLeft">
					<view class="leftHeader">
						<l-circularProgress progressColor="#65B9FF" boxWidth="69" boxHeight="69" :lineWidth="6" :fontShow="false"
							gradualColor="#353DFF" :percent="percent">
						</l-circularProgress>
						<view class="schedule
              "><span class="nowNum">{{ optionsList[subjectIndex]?.no }}</span>/<span
								class="allNum">{{optionsList.length }}</span></view>
					</view>
					<view class="leftBody">
						<view class="title">
							指导语：
						</view>
						<view class="tipItem">
							{{testForm?.guidelines}}
						</view>
					</view>

				</view>
				<view class="conRight">
					<view class="rightBody">
						<view class="testTitle"><span class="number">{{ subjectIndex + 1 }}.</span><span>{{
                optionsList[subjectIndex]?.title
              }}？</span></view>
						<view class="testBody">
							<view class="testItem" v-for="(item,index) in optionsList[subjectIndex]?.option" :key="index"
								:class="{active:item?.isActive}" @click="handleClick(item)">
								<view class="radio" :class="{active:item?.isActive}"></view>
								<view class="option"> {{ OPTIONS(index + 1) }} . {{ item?.title }}</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="contFooter">
				<view class="footer">
					<view class="item" v-if="subjectIndex != 0" @click="lastSubject">
						<image src="../../static/image/lastTim.png" mode=""></image>
					</view>
					<view class="item" @click="nextSubject" v-if="subjectIndex != optionsList.length - 1">
						<image src="../../static/image/nextTim.png" mode=""></image>
					</view>
					<view class="item" v-if="subjectIndex == optionsList.length - 1 " @click="submitSubject">
						<image src="../../static/image/spsubmit.png" mode=""></image>
					</view>
				</view>
			</view>
		</wareHouse>
	</view>
</template>

<script setup lang="ts">
	import { finishAnswer, getAnswerForm, postAnswerItem, } from "@/api/answerPage";
	import { OPTIONS } from "@/tools/index";
	import { computed, onMounted, ref } from "vue";
	import { useRoute,useRouter } from "vue-router";
	import wareHouse from '@/components/warehouse/index.vue'
	import { onLoad } from "@dcloudio/uni-app";
	const loading = ref(false)
	const route = useRoute()
  const router = useRouter()
	const subjectIndex = ref(0)
	const optionsList = ref([])
	const testForm = ref()
	const recordId = ref(null)
	const percent = computed(() => {
		return (subjectIndex.value + 1) / optionsList.value.length * 100
	})
	// #ifdef APP-PLUS
	onLoad((query) => {
		AnswerList()
		console.log(query, 'onload.query');
		if (query.id) {
			recordId.value = query.id
		}
	})
	// #endif
	onMounted(() => {
		AnswerList()
		console.log(route);
		if (route.query.id) {
			recordId.value = route.query.id
			console.log(recordId.value)
		}
	})

	//获取答题列表
	const AnswerList = () => {
		getAnswerForm().then(res => {
			if (res.scaleSubVos.length) {
				testForm.value = res.scale
				optionsList.value = res.scaleSubVos
				optionsList.value = res.scaleSubVos.map((item : any) => {
					item.option = item.option.map((v : any) => {
						v.isActive = false
						return v
					})
					return item
				})
			}
		})
	}
	//题目操作
	//选择
	const handleClick = (item : any) => {
		optionsList.value[subjectIndex.value].option.forEach((v : any) => {
			v.isActive = false
		})
		item.isActive = true
	}
	//上一题
	const lastSubject = () => {
		subjectIndex.value -= 1
		console.log(subjectIndex.value)
	}
	//下一题
	const nextSubject = () => {
		loading.value = true
		const isPitch = optionsList.value[subjectIndex.value].option.find((v : any) => v.isActive)
		if (isPitch) {
			const subjectForm = {
				id: optionsList.value[subjectIndex.value].id, //题目Id
				subTitle: optionsList.value[subjectIndex.value].title,
				optionId: isPitch.id, //选项Id
				optionTitle: isPitch.title, //选项标题
				score: isPitch.score, //分数
				subId: isPitch.subId, //子题Id
				recordId: recordId.value,

			}
			postAnswerItem(subjectForm).then((res : any) => {
				if (res.msg === "success") {
					loading.value = false
					if (subjectIndex.value < optionsList.value.length - 1) {
						subjectIndex.value += 1
					}
				}
			})
		} else {
			uni.showToast({
				title: '请选择答案',
				icon: 'none'
			})
			loading.value = false
			return
		}
		console.log(subjectIndex.value)
	}
	//提交
	const submitSubject = async () => {
		await nextSubject()
		console.log(subjectIndex.value)
		finishAnswer(recordId.value).then((res : any) => {
			console.log(res)
			if (res.code === 0) {
				uni.showToast({
					title: '提交成功，即将进入下一环节！',
					icon: 'none',
					duration: 2000,
				}).then(()=>{
          router.push('/pages/home/home?type=1')
        })
			}
		})
	}
</script>

<style lang="scss" scoped>
	.conTitle {
		width: 100%;
		text-align: center;
		font-weight: 600;
		font-size: 13.28rpx;
		color: #FFFFFF;
		letter-spacing: 0;
		height: 50rpx;
		line-height: 50rpx;
	}

	.contentCn {
		padding: 0 62.5rpx 0 54.69rpx;
		display: flex;

		.conLeft {
			padding: 7.81rpx;
			width: 164.06rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.leftHeader {
				position: relative;

				.schedule {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					color: #090b32;
					font-size: 9.38rpx;
					font-weight: bold;
					line-height: 0;
					letter-spacing: 0;
					text-align: center;

					.nowNum {
						font-size: 19.53rpx;
						color: #353dff;
					}
				}
			}

			.leftBody {
				margin-top: 13.28rpx;
				width: 161.72rpx;
				height: 167.58rpx;
				background-image: linear-gradient(0deg, #FDFDFD 0%, #F3F4F7 100%);
				border: 1.17rpx solid #FFFFFF;
				border-radius: 7.81rpx;
				padding: 10.94rpx 9.38rpx;

				.title {
					font-weight: 500;
					font-size: 7.81rpx;
					color: #000;
					letter-spacing: 0;
					position: relative;

				}

				.title::before {
					position: absolute;
					content: '';
					width: 1.56rpx;
					height: 7.03rpx;
					background: #353DFF;
					left: -3.91rpx;
					top: 2rpx;
				}

				.tipItem {
					margin-top: 9.38rpx;
					width: 142.97rpx;
					height: 119.53rpx;
					font-weight: 400;
					font-size: 6.25rpx;
					color: #3C3C5D;
					letter-spacing: 0rpx;
					line-height: 13.28rpx;
				}
			}
		}

		.conRight {
			flex: 1;
			padding: 21.09rpx 31.25rpx;

			.rightBody {
				.testTitle {
					font-weight: 600;
					font-size: 9.38rpx;
					color: #090B32;
					letter-spacing: 0;

					.number {
						font-weight: 600;
						font-size: 9.38rpx;
						color: #353DFF;
						letter-spacing: 0;
						margin-right: 7.81rpx;
					}
				}

				.testBody {
					margin-top: 15.63rpx;

					.testItem {
						width: 349.22rpx;
						height: 26.56rpx;
						border-radius: 13.28rpx;
						margin-bottom: 11.72rpx;
						font-weight: 400;
						font-size: 9.38rpx;
						color: #090B32;
						letter-spacing: 0;
						display: flex;
						align-items: center;
						padding: 0rpx 7.81rpx;

						//border: 1rpx solid #979797;
						.radio {
							width: 10.94rpx;
							height: 10.94rpx;
							border-radius: 10.94rpx;
							margin-right: 7.81rpx;
							border: 0.39rpx solid #979797;
						}

						.active {
							background-color: #353DFF;
							border: 1.95rpx solid #fff;
						}
					}

					.active {
						background: #353DFF;
						border: 1.17rpx solid #03FAFF;
						color: #fff;
					}
				}
			}
		}
	}

	.contFooter {
		width: 100%;
		margin-top: 39.84rpx;

		.footer {
			display: flex;
			justify-content: center;
			gap: 23.44rpx;

			.item {
				width: 125rpx;
				height: 37.11rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
